
	<title>我的购物车</title>
    <link rel="stylesheet" type="text/css" href="/static/hone/css/pages-cart.css" />
	<script type="text/javascript" src="/static/hone/js/pages/index.js"></script>
	
	<!--主内容-->
	<div class="cart py-container">
		<!--All goods-->
		<div class="allgoods">
			<h4>全部商品<span>11</span></h4>
			<div class="cart-main">
				<div class="yui3-g cart-th">
					<div class="yui3-u-1-4"><input type="checkbox" name="" id="" value="" /> 全部</div>
					<div class="yui3-u-1-4">商品</div>
					<div class="yui3-u-1-8">单价（元）</div>
					<div class="yui3-u-1-8">数量</div>
					<div class="yui3-u-1-8">小计（元）</div>
					<div class="yui3-u-1-8">操作</div>
				</div>
				<div class="cart-item-list">
					<div class="cart-shop">
						<input type="checkbox" name="" id="" value="" />
						<span class="shopname self">传智自营</span>
					</div>
					{foreach $goods as $v}
					<div class="cart-body">
						<div class="cart-list">
							<ul class="goods-list yui3-g cartid" cart_id="{$v.id}" cart_number="{$v.number}">
								<li class="yui3-u-1-24">
									<input type="checkbox" {if ($v.is_selected == 1)} checked {/if} class="row_check" name="" id="" value="" />
								</li>
								<li class="yui3-u-6-24">
									<div class="good-item">
										<div class="item-img"><img src="{$v.goods.goods_logo}" /></div>
										<div class="item-msg">{$v.goods.goods_name}</div>
									</div>
								</li>
								<li class="yui3-u-5-24">
									<div class="item-txt">{$v.goods.value_names}</div>
								</li>
								<li class="yui3-u-1-8"><span class="price">{$v.goods.goods_price}</span></li>
								<li class="yui3-u-1-8">
									<a href="javascript:void(0)" class="increment mins">-</a>
									<input autocomplete="off" type="text" value="{$v.number}" minnum="{$v.number}" class="itxt current_number" />
									<a href="javascript:void(0)" class="increment plus">+</a>
								</li>
								<li class="yui3-u-1-8"><span class="sum">{$v.number * $v.goods.goods_price}</span></li>
								<li class="yui3-u-1-8">
									<a href="#none" class="delete">删除</a><br />
									<a href="#none">移到我的关注</a>
								</li>
							</ul>
						</div>
					</div>
					{/foreach}
				</div>
			</div>
			<div class="cart-tool">
				<div class="select-all">
					<input type="checkbox" class="check_all" name="" value="" />
					<span>全选</span>
				</div>
				<div class="option">
					<a href="#none">删除选中的商品</a>
					<a href="#none">移到我的关注</a>
					<a href="#none">清除下柜商品</a>
				</div>
				<div class="money-box">
					<div class="chosed">已选择<span id="total_number">0</span>件商品</div>
					<div class="sumprice">
						<span><em>总价（不含运费） ：</em><i id="total_price" class="summoney">¥0</i></span>
						<span><em>已节省：</em><i>-¥0</i></span>
					</div>
					<div class="sumbtn">
						<a class="sum-btn" href="javascript:;">结算</a>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="deled">
				<span>已删除商品，您可以重新购买或加关注：</span>
				<div class="cart-list del">
					<ul class="goods-list yui3-g">
						<li class="yui3-u-1-2">
							<div class="good-item">
								<div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
							</div>
						</li>
						<li class="yui3-u-1-6"><span class="price">8848.00</span></li>
						<li class="yui3-u-1-6">
							<span class="number">1</span>
						</li>
						<li class="yui3-u-1-8">
							<a href="#none">重新购买</a>
							<a href="#none">移到我的关注</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="liked">
				<ul class="sui-nav nav-tabs">
					<li class="active">
						<a href="#index" data-toggle="tab">猜你喜欢</a>
					</li>
					<li>
						<a href="#profile" data-toggle="tab">特惠换购</a>
					</li>


				</ul>
				<div class="clearfix"></div>
				<div class="tab-content">
					<div id="index" class="tab-pane active">
						<div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
							<div class="carousel-inner">
								<div class="active item">
									<ul>
										<li>
											<img src="/static/hone/img/like1.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/hone/img/like2.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/hone/img/like3.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/hone/img/like4.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
									</ul>
								</div>
								<div class="item">
									<ul>
										<li>
											<img src="/static/hone/img/like1.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/hone/img/like2.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/hone/img/like3.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/hone/img/like4.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
							<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
						</div>
					</div>
					<div id="profile" class="tab-pane">
						<p>特惠选购</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--侧栏面板结束-->
	<script type="text/javascript">
		$(function(){
			//计算已选商品数量和金额
			var change_total = function(){
				//获取到选中的行checkbox 遍历，获取对应行的数量和小计金额，进行累加
				var total_number = 0;
				var total_price = 0;
				$('.row_check:checked').each(function(i,v){
					//v是一个checkbox标签
					//累加每一行的数量
					total_number += parseInt( $(v).closest('ul').find('.current_number').val() );
					//累加每一行的小计金额
					total_price += parseFloat( $(v).closest('ul').find('.sum').html() );
				});
				//将计算好的数量和金额，显示到页面
				$('#total_number').html(total_number);
				$('#total_price').html('¥' + total_price);
			};
			//计算已选商品数量和金额
			change_total();

			//控制全选的选中状态
			function check_all(){
				var total = $('.row_check').length;
				var checked = $('.row_check:checked').length;
				//console.log(total, checked);
				var status = total == checked;
				$('.check_all').prop('checked', status);
				//相当于以下if else判断
				/*if(total == checked){
				 $('.check_all').prop('checked', true);
				 }else{
				 $('.check_all').prop('checked', false);
				 }*/
			}
			//控制全选的选中状态
			check_all();

			//修改购买数量
			var change_num = function(number, element){
				let data = {
					"id":$(element).closest('ul').attr("cart_id"),
					"number":number
				}
				// console.log(data);
				$.ajax({
					url: '{:url("cart/change_num")}',
					type: 'post',
					dataType: 'json',
					data: data,
					success:function(ret){
						if(ret.status !== 200){
							return alert(ret.msg);
						}
						//修改成功后的处理
						//显示到当前行的input
						$(element).closest('ul').find('.current_number').val(number);
						//计算当前行的小计金额
						var price = parseFloat( $(element).closest('ul').find('.price').html() );
						var sum = price * number;
						$(element).closest('ul').find('.sum').html(sum);
						$(".cartid").attr("cart_number",number);
						//计算已选的数量和金额
						change_total();
					}
				});
				
			}
			var change_status = function(element){
				// 判断他传入当前行里面的class属性是什么 从而获取到什么值
				var data = {
					"id":$(element).hasClass('check_all') ? "all" : $(element).closest('ul').attr("cart_id"),
					"is_selected":$(element).prop("checked")?1:0
				};
				console.log(data);
				$.ajax({
					url: '{:url("cart/changeStatus")}',
					type: 'post',
					dataType: 'json',
					data: data,
					success:function(ret){
						if(ret.status !== 200){
							alert(ret.msg);
							return ;
						}
					}
				});
			}
			//全选效果
			$('.check_all').change(function(){
				//获取全选的选中状态  checked属性值
				var status = $('.check_all').prop('checked');
				//console.log(status);
				//设置每一行的checkbox 和全选状态一致
				$('.row_check').prop('checked', status);
				//计算已选商品数量和金额
				change_total();
				// 传入当前的行
				change_status(this);
			});

			//每一行checkbox的效果
			$('.row_check').change(function(){
				//控制全选的选中状态
				check_all();
				//计算选中数量和金额
				change_total();
				// 传入当前的行
				change_status(this)
			});

			//+号修改数量
			$('.plus').click(function(){
				//取到当前行input的数量
				//var number = $(this).prev().val();
				var number = parseInt($(this).closest('ul').find('.current_number').val());
				//计算新的数量 +1
				number++;
				//发送ajax请求修改数量
				change_num(number, this);
			});

			//-号修改数量
			$('.mins').click(function(){
				//取到当前行input的数量
				//var number = $(this).next().val();
				var number = parseInt($(this).closest('ul').find('.current_number').val());
				if(number == 1) return;
				//计算新的数量 -1
				number--;
				//发送ajax请求修改数量
				change_num(number, this);
			});

			//input直接修改数量
			$('.current_number').change(function(){
				//获取到修改数量
				var number = $(this).val();
				//检测数量格式 略
				if(!/^\d+$/.test(number) || number == 0){
					alert('购买数量必须是正整数');
					let number = $(".cartid").attr("cart_number");
					$(this).val(number);
					return;
				}
				/*if(isNaN(number) || parseInt(number)!=number || number <= 0){
					alert('购买数量必须是正整数');return;
				}*/
				//发送ajax请求修改数量
				change_num(number, this);
			});

			//删除购物记录
			$('.delete').click(function(){
				$.ajax({
					url: '{:url("cart/delcart")}',
					type: 'post',
					dataType: 'json',
					data:"id=" + $(".cartid").attr("cart_id"),
					success:function(ret){
						if(ret.status !== 200){
							return alert(ret.msg);
						}
						alert(ret.msg);
						//移除当前行记录
						$(this).closest('.cart-list').remove();
						//$(this).closest('ul').parent().remove();
						//计算选中数量和金额
						change_total();
					}
				});
				

			});

			//结算
			$('.sum-btn').click(function(){
				//判断是否有选中的记录
				if($('.row_check:checked').length == 0){
					alert('至少选中一条购物记录');return;
				}
				//跳转到结算页面
				location.href = "{:url('order/index')}";
			});
		})
	</script>
</body>

</html>